@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: 'Fredoka', 'Baloo 2', 'Microsoft YaHei', -apple-system, sans-serif;
    font-size: 19px;
    line-height: 1.7;
    background-color: #FFFBF0;
    color: #2D3748;
  }
  
  /* 为儿童友好优化滚动条 */
  * {
    scrollbar-width: thin;
    scrollbar-color: #FF6B6B #FFF4E6;
  }
  
  *::-webkit-scrollbar {
    width: 8px;
  }
  
  *::-webkit-scrollbar-track {
    background: #FFF4E6;
  }
  
  *::-webkit-scrollbar-thumb {
    background: #FF6B6B;
    border-radius: 4px;
  }
}

@layer components {
  /* 儿童友好的按钮样式 */
  .btn-primary {
    @apply bg-gradient-to-r from-primary-coral to-primary-orange text-white font-bold py-4 px-8 rounded-pill shadow-button hover:shadow-cardHover transform hover:-translate-y-1 hover:scale-105 transition-all duration-300 active:scale-95;
    min-height: 64px;
    min-width: 64px;
    font-size: 20px;
    font-weight: 700;
  }
  
  .btn-secondary {
    @apply bg-white text-primary-coral border-2 border-primary-coral font-bold py-4 px-8 rounded-pill hover:bg-primary-coral hover:text-white transition-all duration-300;
    min-height: 64px;
    min-width: 64px;
    font-size: 18px;
  }
  
  .btn-icon {
    @apply bg-gradient-to-r from-secondary-turquoise to-secondary-skyBlue text-white rounded-circle shadow-button hover:shadow-cardHover transform hover:-translate-y-1 hover:scale-105 transition-all duration-300 flex items-center justify-center;
    width: 64px;
    height: 64px;
  }
  
  /* 古诗卡片样式 */
  .poetry-card {
    @apply bg-white rounded-card shadow-card hover:shadow-cardHover transform hover:-translate-y-4 hover:rotate-[-2deg] transition-all duration-300 p-8 cursor-pointer;
    border: 2px solid transparent;
  }
  
  .poetry-card:hover {
    border-image: linear-gradient(135deg, #FF6B6B, #FF8E53) 1;
    border-width: 4px;
    border-style: solid;
  }
  
  /* 进度圆环 */
  .progress-ring {
    transform: rotate(-90deg);
  }
  
  .progress-ring circle {
    transition: stroke-dasharray 0.5s ease-in-out;
  }
  
  /* 词汇气泡 */
  .word-tooltip {
    @apply bg-white rounded-input shadow-modal p-6 max-w-xs relative;
    animation: tooltip-appear 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .word-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: white;
  }
  
  @keyframes tooltip-appear {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.8);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* 成功动画 */
  .success-animation {
    animation: success-burst 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  @keyframes success-burst {
    0% {
      transform: scale(0) rotate(0deg);
      opacity: 0;
    }
    50% {
      transform: scale(1.2) rotate(180deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(360deg);
      opacity: 1;
    }
  }
  
  /* 无障碍焦点状态 */
  .focus-ring {
    @apply focus:outline-none focus:ring-4 focus:ring-secondary-turquoise focus:ring-opacity-50;
  }
}